<style>
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{
        border:none !important;
    }
</style>
<div class="region-goods-details row">
    <div class="region-goods-left col-sm-2">
        参数
    </div>
    <div class="region-goods-right col-sm-10">
        <table class="table">
            <thead>
            <tr>
                <td style='width:150px;'>参数名称</td>
                <td>参数值 <small>拖动行可进行排序</small></td>
                <th style='width:50px;'></th>
            </tr>
            </thead>
            <tbody id="param-items">
            {foreach name='params' item='p'}
            <tr>
                <td>
                    <input name="param_title[]" type="text" class="form-control param_title" value="{$p['title']}"/>
                    <input name="param_id[]" type="hidden" class="form-control" value="{$p['id']}"/>
                </td>
                <td>
                    <input name="param_value[]" type="text" class="form-control param_value" value="{$p['value']}"/>
                </td>
                <td>
                    <a href="javascript:;" class='btn btn-default btn-sm' onclick="deleteParam(this)" title="删除"><i class='fa fa-remove'></i></a>
                </td>
            </tr>
            {/foreach}
            </tbody>
            <tbody>
            <tr>
                <td colspan="3">
                    <a href="javascript:;" id='add-param' onclick="addParam()" class="btn btn-default"  title="添加参数"><i class='fa fa-plus'></i> 添加参数</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>







<script language="javascript">

    $(function() {

    	require(['jquery.ui'],function(){

    	  $("#param-items").sortable();

        });

        $("#chkoption").click(function() {

            var obj = $(this);

            if (obj.get(0).checked) {

                $("#tboption").show();

                $(".trp").hide();

            } else {

                $("#tboption").hide();

                $(".trp").show();

            }

        });

    })

    function addParam() {
        var url = "{:url('merch/goods/tpl',array('tpl'=>'param'))}";
        $.ajax({
            "url": url,
            success: function(data) {
                $('#param-items').append(data);
            }
        });
        return;
    }
    function deleteParam(o) {
        $(o).parent().parent().remove();
    }

</script>

